<template>
	<view>
		<!-- 基本信息 -->
		<view class="bg-white">
			<!-- 头像 -->
			<view  class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">头像</text>
				<view class="w-100 flex justify-between align-center">
					<button plain="true" class="p-0 m-0 rounded-circle" style=" width:100rpx; height:100rpx;"
						open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image :src="form.Image" style="width: 100rpx; height: 100rpx;"></image>
					</button>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 昵称 -->
			<view class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">昵称</text>
				<view class="w-100 flex justify-between align-center">
					<input @blur="bindinput" class="font" @input="bindinput" type="nickname" v-model="form.Member_Nike">
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 性别 -->
			<view >
				<view @click="handlePopup" class="mx-2 py-2 flex align-center border-bottom border-light">
					<text class="font text-dark flex-shrink mr-2" style="width: 25%;">性别</text>
					<view class="w-100 flex justify-between align-center">
						<text class="font">{{ form.Sex ? form.Sex : '未知' }}</text>
						<uni-icons type="right" color="#828d96" size="16"></uni-icons>
					</view>	
				</view>
			</view>
			<!-- 生日 -->
			<view class="mx-2 py-2 flex align-center border-bottom border-light">
				<text class="font text-dark flex-shrink mr-2" style="width: 25%;">生日</text>
				<view class="w-100 flex justify-between align-center">
					<picker mode="date" @change="bindDateChange">
						<text class="font">{{form.Birthday? form.Birthday : '请选择生日'}}</text>
					</picker>
					<uni-icons type="right" color="#828d96" size="16"></uni-icons>
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="mx-2 py-2 flex justify-between align-center" @click="handleAddress">
				<text class="font text-dark">收货地址</text>
				<uni-icons type="right" color="#828d96" size="16"></uni-icons>
			</view>
		</view>
		<!-- 保存 -->
		<view style="position: fixed; bottom: 10rpx;" class="w-100">
			<button @click="revise" class="baocun bg-success">保存</button>
		</view>
		<!-- 性别选择器 -->
		<view v-if="genderPopupVisible" class="popup" @click.stop="handlePopup">
			<view class="popup-content">
				<view class="font" @click="selectGender('男')">男</view>
				<view class="font" @click="selectGender('女')">女</view>
				<view class="bg-light" style="height: 10rpx;"></view>
				<view @click.stop="handlePopup" class="font">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import Base64 from "base-64";
	import { mapState,mapMutations } from 'vuex';
	import { generalSave, generalQueryBySQLSerialNumber , generalQueryByTableName } from '@/api/generalBusiness.js';
	export default {
		data() {
			return {
				form: {},
				isShow: false, //弹窗
				gender: ['男', '女'],
				range: [{
						value: 0,
						text: "男"
					},
					{
						value: 1,
						text: "女"
					},
					{
						value: '',
						text: "未知"
					},
				],
				loading: false,
				genderPopupVisible:false,
			}
		},
		computed:{
			...mapState(['Open_ID','App_ID','Member','MY_Page']),
		},
		onLoad() {
			this.getData();
		},
		methods: {
			...mapMutations(['setMember','setBASEPath','setBASEQuery']),
			bindinput(e) {
				//这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
				this.form.Member_Nike = e.detail.value;
			},
			handlePopup() { //性别选择器
				this.genderPopupVisible = !this.genderPopupVisible;
			},
			selectGender(gender) { //选择性别
				this.form.Sex = gender;
			},
			bindDateChange: function(e) { //选择生日
				this.form.Birthday = e.detail.value
			},
			onChooseavatar(e) { //选择图片
				this.form.Image = e.detail.avatarUrl;
				const that = this
				uni.getFileSystemManager().readFile({
					filePath: e.detail.avatarUrl, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: (res) => { //成功的回调
						that.form.Image = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
					},
					fail: () => {
						uni.showToast({
							title:'图片获取失败！',
							icon:'none'
						})
					}
				})
			},
			async getData(){
				const data = await generalQueryByTableName({
					TableName:'business_member_account_info',
					Condition: "Open_ID = '"+this.Open_ID+"'"
				})
				this.form = data[0];
			},
			async revise() {
				//判断是否有修改
				if (!this.loading) {
					this.loading = true
					uni.showLoading({title: "提交中..."});
					this.generalSave({
						Data:JSON.stringify({Modify:{business_member_account_info:[this.form]}})
					},(res)=>{
						if(res.Status == 'success'){
							this.generalQueryBySQLSerialNumber({
								SQLSerialNumber:'M_business_member_account_info',
								Condition:Base64.encode(this.Open_ID),
								ExtensionCondition:''
							},(data)=>{
								this.setMember(data[0]);
								this.setBASEPath(this.MY_Page);//跳转路径
								this.setBASEQuery({});//传参
								uni.reLaunch({
									url:'/pages/index/index',
								})
							})
						}else{
							uni.showToast({
								title: '修改失败！个人信息已被修改',
								icon: 'error'
							})
							this.loading = false;
						}
						uni.hideLoading();
					})
				}
			},
			handleAddress() { //跳转到收货地址
				uni.redirectTo({
					url: '/pages/delivery/address'
				});
			},
			async generalSave(Data,callback){//同意修改
				callback(await generalSave(Data));
			},
			async generalQueryBySQLSerialNumber(Data,callback){//通用查询表名
				callback(await generalQueryBySQLSerialNumber(Data));
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f9fa;
	}
	button[plain] {
		border: 0
	}
	.info_content {
		width: 50%;
	}
	.item {
		line-height: 2;
	}
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-content {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
		box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
		bottom: 0;
		position: absolute;
	}

	.popup-content view {
		padding: 10px;
		text-align: center;
	}

	.baocun {
		width: 80%;
		margin: 44rpx auto;
		height: 76rpx;
		text-align: center;
		font-size: 33rpx;
		border-radius: 63rpx;
		color: white;
		align-items: center;
		justify-content: center;
		display: flex;
	}
</style>